<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            font-size: 10px;
        }
        .content {
            width: 100vw;
            height: 100vh;
        }
        .p1 {
            font-size: 2rem;
        }
    </style>
</head>
<body>
    <div class="content">
        <p class="p1">我是一段文字 我的字体大小会随着页面的大小而变化</p>
    </div>

    <script>
        // onresize 屏幕尺寸的变化
        window.onresize = function() {
            // console.log(123);
            if(Math.abs('新屏幕'-'老屏幕') >= 20){
                // 当前屏幕的宽度
                var winW = document.documentElement.clientWidth;
                // 标准值
                var sWidth = 375;
                // 实际值/标准值 得到比率 屏幕大时这个值>1 屏幕小时<1
                var userRem = (winW/sWidth)*10+'px';
                var htmlEl = document.querySelector('html');
                // 根据用户屏幕的大小 动态跳转rem的值 等比例放大或缩小
                htmlEl.style.fontSize = userRem;
            }
        }
    </script>
</body>
</html>